<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据表格</title>
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
  href="${pageContext.servletContext.contextPath}/jquery-easyui/themes/icon.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<style type="text/css">
.easyui-textbox {
  width: 80%
}
</style>
</head>
<body>
  <div id="toolbar">
    <input class="easyui-textbox" data-options="width: 200, type: 'text', prompt: '输入查询关键字'">
    <a id="search" class="easyui-linkbutton" data-options="iconCls: 'icon-search'">查询</a>
  </div>
  <div id="footer">
    <a class="easyui-linkbutton" data-options="iconCls: 'icon-add'">添加</a>
    <a id="edit" class="easyui-linkbutton" data-options="iconCls: 'icon-edit'">编辑</a>
    <a id="remove" class="easyui-linkbutton" data-options="iconCls: 'icon-remove'">移除</a>
  </div>
  <table id="datagrid">
    <thead>
      <tr>
        <th data-options="field: '', checkbox: true"></th>
        <th data-options="field: 'identifier', sortable: true, order: 'asc', align: 'right'">标识</th>
        <th data-options="field: 'userName', halign: 'center', width: 200">用户名</th>
        <th data-options="field: 'age'">年龄</th>
        <th data-options="field: 'email', fixed: true">邮件地址</th>
        <th data-options="field: 'registrationTime'">注册时间</th>
      </tr>
    </thead>
  </table>
  <div class="easyui-dialog" style="width: 350px; height: 270px; text-align: center; padding: 25px 0;"
    data-options="buttons: '#buttons', closable: false, closed: true, title: '编辑', iconCls: 'icon-edit'">
    <form id="easyui-form" method="post">
      <div>
        <input class="easyui-textbox" name="identifier" style="width: 80%"
          data-options="label: '编号', readonly: true, required: true">
      </div>
      <div>
        <input class="easyui-textbox" name="userName" style="width: 80%" data-options="label: '用户名', required: true">
      </div>
      <div>
        <input class="easyui-textbox" name="age" style="width: 80%" data-options="label: '年龄', required: true">
      </div>
      <div>
        <input class="easyui-textbox" name="email" style="width: 80%" data-options="label: '邮件地址', required: true">
      </div>
      <div>
        <input class="easyui-datebox" name="registrationTime" style="width: 80%"
          data-options="label: '注册时间', required: true" validType="validateDate">
      </div>
    </form>
    <div id="buttons">
      <a onclick="saveFormData()" href="javascript:;" id="save" class="easyui-linkbutton" data-options="iconCls: 'icon-save'">
        保存
      </a>
      <a href="javascript:closeDialog()" class="easyui-linkbutton" data-options="iconCls: 'icon-no', plain: true">
        取消
      </a>
    </div>
  </div>
  <script type="text/javascript">
    function closeDialog() {
      $('.easyui-dialog').dialog('close');
    }
    function saveFormData() {
      var rowData;
      $("#easyui-form").form("submit", {
        url: "${pageContext.request.contextPath}/datagrid-server",
        onSubmit: function (param) {
          //console.log(param);
          /* var arr = $(".textbox-value");
          for (var e of arr) {
            var name = $(e).attr("name");
            //如果参数名称是主键字段名称，那么跳过本次循环，避免主键值发生更改
            if (Object.is(name, "identifier")) {
              continue;
            }
            //console.log(name + ":" + $(e).val());
            //param[name] = $(e).val();
          } */
          param['operation'] = "update";
          rowData = param;
          console.log(param);
          //提交数据
          return true;
        },
        /* success: function (data) {
          //console.log(data);
        } */
      });
      /* var row = $("#datagrid").datagrid("getSelected");
      var tableRowString = ".datagrid-row.datagrid-row-checked.datagrid-row-selected";
      for (var key in rowData) {
        //console.log(row);
        row[key] = rowData[key];
        var tableCellString = tableRowString + ">td[field=" + key + "]";
        //console.log(tableCellString);
        var innerText = $(tableCellString + ">div").text();
        //console.log("text:" + innerText);
        //console.log("row[" + key + "]:" + row[key]);
        $(tableCellString + ">div").text(row[key]);
        //console.log($(tableCellString + ">div").text());
      } */
      closeDialog();
      $("#datagrid").datagrid('reload');
    }
    /* function emailFormatter(value, row, index) {
      value = value.replace('@', '#');
      return value;
    }
    function registrationTimeStyler(value, row, index) {
      if (value.indexOf("201") > -1) {
        return 'background-color: #ffee00; color: red';
      }
    } */
    $(function () {
      $.extend($.fn.validatebox.defaults.rules, {
        validateDate: {
          validator: function (value) {
            //console.log("value:" + value);
            var state = /^(\d{3}|\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/.test(value);
            //console.log(state);
            if (state) {
              $("#save").linkbutton("enable");
            } else {
              $("#save").linkbutton("disable");
            }
            return state;
          }
        }
      })
      $("#datagrid").datagrid({
        //在编辑行的时候使用的编辑器
        //editors: {},
        //url : 'data.json',
        //url: '${pageContext.request.contextPath}/datagrid-server',
        //求远程数据的方法类型
        //method: 'get',
        //顶部工具栏的DataGrid面板。可能的值：一个数组，每个工具属性都和linkbutton一样；选择器指定的工具栏
        toolbar : '#toolbar',
        //面板页脚
        footer : '#footer',
        //datagrid（数据网格）列的配置对象
        /* columns: {
          //编辑类型。当字符串指明编辑类型的时候，对象包含2个属性
          //type：字符串，该编辑类型可以使用的类型有：text，textarea，checkbox，numberbox，validatebox，datebox，combobox，combotree
          //options：对象，编辑类型对应的编辑器属性
          editor: {
            type: '',
            options: {
              //
            }
          }
        }, */
        //在请求远程数据的时候发送额外的参数。默认值为{}
        //这个方法会被datagrid的load方法取代：$(this).datagrid('load', {})
        /* queryParams: {
          //name: 'value',
          //...
        }, */
        //一次性排序的列的名称
        sortName : 'identifier',
        //列的一次性排序顺序，只能是'asc'或'desc'
        sortOrder : 'asc',
        //自动展开/收缩列的大小以适应网格的宽度，默认值为false
        //fitColumns: true,
        //是否从服务器对数据进行排序，默认值为true
        remoteSort : false,
        //是否显示斑马线效果，默认值为false
        striped : true,
        //是否在同一行中显示数据，设置为true可以提高加载性能。默认值为true
        //nowrap: false,
        //从远程站点加载数据的时候显示提示消息，默认值为“Processing, please wait …”
        loadMsg : '正在处理，请稍候...',
        //只允许选择一行，默认值为false
        //singleSelect : true,
        width : '70%',
        style: {
          margin: 'auto'
        },
        //是否在底部显示分页工具栏，默认值为false
        pagination : true,
        //标识字段
        idField : 'identifier',
        pageSize : 10,
        pageList : [ 10, 20, 30, 40 ],
        //显示一个行号列，默认值为false
        rownumbers : true,
        /* loadFilter: function (data) {
          return data.records;
        }, */
        onDblClickRow: function (index, row) {
          console.log(row);
          //构建对象，也可以构建映射（Map）
          var identifier = row["identifier"];
          console.log(identifier);
          var url = "${pageContext.request.contextPath}/datagrid-server?operation=selectByPrimaryKey&identifier=" + identifier;
          /* var data = new Object(); // new Map();
          for (var key in row) {
            data[key] = row[key]; // data.set(key, row[key]);
          }
          //与打印的row的数据作比较
          console.log(data); */
          //打开面板。如果参数forceOpen的值为true，打开面板时将忽略onBeforeOpen回调函数
          $(".easyui-dialog").dialog("open");
          //读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
          //以下两条语句的作用相同
          //$("#easyui-form").form("load", row);
          $("#easyui-form").form("load", url);
        }
      })
      $("#search").linkbutton({
        onClick : function () {
          var options = $(".datagrid-pager.pagination").pagination('options');
          $("#datagrid").datagrid("options").url = "${pageContext.request.contextPath}/datagrid-server";
          console.log(options);
          console.log('pageSize=' + options['pageSize']);
          console.log('pageNumber=' + options['pageNumber']);
          var keyword = $(".textbox-value").val();
          $("#datagrid").datagrid('load', {
            operation: "selectByKeyword",
            "keyword": keyword
          })
        }
      })
      $("#edit").linkbutton({
        onClick: function () {
          var rows = $("#datagrid").datagrid("getSelections");
          //如果数组的长度不等于1
          if (rows.length != 1) {
            //取消选择所有当前页中所有的行
            $("#datagrid").datagrid("unselectAll");
            return false;
          }
          //获取第一个被选中的行
          var row = $("#datagrid").datagrid("getSelected");
          //如果存在被选中的单元行，那么打开指定对话框
          if (row != null) {
            console.log(row);
            //构建对象，也可以构建映射（Map）
            var identifier = row["identifier"];
            console.log(identifier);
            var url = "${pageContext.request.contextPath}/datagrid-server?operation=selectByPrimaryKey&identifier=" + identifier;
            /* var data = new Object(); // new Map();
            for (var key in row) {
              data[key] = row[key]; // data.set(key, row[key]);
            }
            //与打印的row的数据作比较
            console.log(data); */
            //打开面板。如果参数forceOpen的值为true，打开面板时将忽略onBeforeOpen回调函数
            $(".easyui-dialog").dialog("open");
            //读取记录填充到表单中。数据参数可以是一个字符串或一个对象类型，如果是字符串则作为远程URL，否则作为本地记录
            //以下两条语句的作用相同
            //$("#easyui-form").form("load", row);
            $("#easyui-form").form("load", url);
          }
        }
      })
      $("#remove").linkbutton({
        onClick: function () {
          var container = $("#datagrid");
          container.datagrid("options").url = "${pageContext.request.contextPath}/datagrid-server";
          var rows = container.datagrid("getSelections");
          if (rows.length == 0) {
            return;
          }
          /* console.log("长度为" + rows.length);
          console.log(rows); */
          var indexes = new Array(rows.length);
          var arr = new Array(rows.length);
          for (var row of rows) {
            for (var key in row) {
              console.log(key + ":" + row[key]);
            }
            var index = container.datagrid("getRowIndex", row);
            var identifier = row['identifier'];
            indexes.push(index);
            arr.push(identifier);
            //console.log(rowIndex);
            //console.log(identifier);
          }
          //console.log(rowIndexes);
          //排序算法的比较规则
          indexes.sort(function compareNumbers(a, b) {
            return b - a;
          });
          arr.sort(function compareNumbers(a, b) {
            return b - a;
          });
          console.log(indexes);
          //console.log(arr);
          //console.log("数组的长度：" + rowIndexes.length);
          //var arr = arr.toString();
          //console.log("arr:" + arr);
          var identifiers = "";
          for (var e of arr) {
            if (e != null) {
              identifiers = identifiers + e + ",";
            } else {
              break;
            }
          }
          identifiers = identifiers.substring(0, identifiers.length - 1);
          console.log(identifiers);
          container.datagrid({
            queryParams: {
              operation: 'remove',
              "identifiers": identifiers
            }
          });
          for (var e of indexes) {
            if (e != null) {
              //console.log("行索引的值：" + e);
              container.datagrid("deleteRow", e);
            } else {
              break;
            }
          }
          // 重新载入当前页面数据
          container.datagrid("reload");
          //console.log(rowIndexes);
        }
      })
    })
  </script>
</body>
</html>